{% extends '../_base.html' %}
{% load i18n %}
{% load staticfiles %}
{% block custom_style %}
    <link href="{% static 'secene/css/secene-detail.css' %}" rel="stylesheet">
    <link href="{% static 'common/css/iPicture.css' %}" rel="stylesheet">
    <link href="{% static 'common/css/jfMagnify.css' %}" rel="stylesheet">
{% endblock %}
<style>
</style>
</head>
<body>
{% block main %}
    <div id="secene-frame">
        <div class="secene-top">
            <div class="logo">
                <img src="{% static 'common/images/logo.png' %}">
            </div>
            <hr>
            <div class="secene-condition">
                <table>
                    <tr>
                        <td style="padding: 0;"></td>
                        <td style="padding: 0;">
                            <form class="layui-form" action="">
                                <div class="layui-form-item" style="margin: 0">
                                    <label class="layui-form-label" style="width: 120px">切换显示与隐藏</label>
                                    <div class="layui-input-block" style="width:300px;" >
                                        <input type="radio" lay-filter="show" class="radio-target" name="show" value="1"
                                               title="显示全部">
                                        <input type="radio" lay-filter="show" class="radio-target" name="show" value="0"
                                               title="隐藏全部"
                                               checked>
                                    </div>
                                </div>
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td style=" text-align: center;"><h2>类型</h2></td>
                        <td nowrap="nowrap">
                            <ul class="type-li-box">
                                <li>
                                    <a {% if active_type_id == -1 %}class="active"{% endif %}
                                       data-id="-1">全部</a>
                                </li>
                                {% for desc_type in desc_type_list %}
                                    <li>
                                        <a {% if desc_type.id == active_type_id %}class="active"{% endif %}
                                           data-id="{{ desc_type.id }}">{{ desc_type.name }}</a>
                                    </li>
                                {% endfor %}

                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td style=" text-align: center;" nowrap="nowrap"><h2>学生</h2></td>
                        <td>
                            <ul class="person-li-box">
                                <li>
                                    <a class="{% if active_person_id == -1 %}active{% endif %}"
                                       data-id="-1">全部</a>
                                </li>
                                {% for person in person_list %}
                                    <li>
                                        <a class="{% if person.id == active_person_id %}active{% endif %}"
                                           data-id="{{ person.id }}">{{ person.nick_name }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </td>
                    </tr>
                </table>
                <hr>
            </div>

        </div>
        <div class="secene-body">
            <div class="secene-content">
                <input type="hidden" id="seceneId" value="{{ object.id }}">
                <div id="iPicture1" data-interaction="hover">
                    <div class="ip_slide">
                        <div class="magnify">
                            <div class="magnify_glass"></div>
                            <div class="element_to_magnify">
                                <img class="ip_tooltipImg" id="ip_tooltipImg1" data-id="1" src="{{ MEDIA_URL }}{{ object.image_first }}"
                                     draggable="false"/>
                                <div class="mark-box">
                                    {% for mark in secene_mark_list %}
                                        {% autoescape off %}
                                            {{ mark.content }}
                                        {% endautoescape %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% if object.image_second %}
                    <div id="iPicture2" data-interaction="hover">
                        <div class="ip_slide">
                            <div class="magnify">
                                <div class="magnify_glass"></div>
                                <div class="element_to_magnify">
                                    <img class="ip_tooltipImg" id="ip_tooltipImg2"  data-id="2" src="{{ MEDIA_URL }}{{ object.image_second }}"
                                         draggable="false"/>
                                    <div class="mark-box">
                                        {% for mark in secene_mark_list %}
                                            {% autoescape off %}
                                                {{ mark.content }}
                                            {% endautoescape %}
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}

            </div>
            <div class="comment">
                <div class="comment-add clearfloat">
                    <form action="/outlines/secene/comment/{{ object.id }}" method="POST">
                        {% csrf_token %}
                        <div class="comment-submit-cont">
                        <textarea id="comment" name="comment" class="form-control" rows="4"
                                  placeholder="请输入评论 不要输太多昂!"></textarea>
                        </div>
                        <div class="comment-btn-cont">
                            <a class="layui-btn layui-btn-small" id="submit-comment">提交评论</a>
                        </div>
                    </form>
                </div>
                <div class="comment-show">
                    <h2 style="font-size: 28px;padding: 0 2px;">评论:</h2>
                    <ul>
                        {% for comment in secene_comment %}
                            <li class="clearfloat">
                                <div class="comment-tx">
                                    <img src="{{ comment.user.mugshot_thumbnail.url }}"
                                         style="width:40px;"/>
                                </div>
                                <div class="comment-content">
                                    <p>
                                        <a><Strong class="comment-user">{{ comment.user.username }}</Strong></a>
                                        <span class="comment-time">{{ comment.add_time|date:"Y-m-d H:i:s" }}</span>
                                    </p>
                                    <p>
                                        评论：
                                        {% autoescape on %}
                                            {{ comment.content }}
                                        {% endautoescape %}
                                    </p>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block custom_script %}
    <script src="{% static 'common/js/jquery1.12.4.min.js' %}"></script>
    <script src="{% static 'common/js/jquery.cookie.js' %}"></script>
    <script src="{% static 'common/js/jquery.ipicture.js' %}"></script>
    <script src="{% static 'common/js/jquery-ui.js' %}"></script>
    <script src="{% static 'common/js/jquery.jfMagnify.min.js' %}"></script>
    <script src="{% static 'secene/js/secene-detail.js' %}"></script>
    <script>
        $(function () {
            var seceneDetail = new $.SeceneDetail();
            seceneDetail.initEvent();
            $(".magnify").jfMagnify();
        });
    </script>
{% endblock %}

</body>
</html>
